<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @select-all="
        (selections) => {
          handSelectionAll(selections, '参数');
        }
      "
      @select="
        (selections) => {
          handSelection(selections, '参数');
        }
      "
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="入库日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="id" label="商品编号" width="120">
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="120">
      </el-table-column>
      <el-table-column prop="address" label="产地" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            class="el-button"
            >编辑</el-button
          >
          <el-dialog
            title="编辑参数"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <!-- <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item label="入库日期" >
                <el-date-picker
                  type="date"
                  v-model="product.inboundDate"
                  style="width: 100%"
                ></el-date-picker>
              </el-descriptions-item>
              <el-descriptions-item label="商品编号">
                <el-input
                  v-model="product.productID"
                  :disabled="true"
                ></el-input>
              </el-descriptions-item>
              <el-descriptions-item label="商品名称" :span="2"
                ><el-input v-model="product.productName" :span="2"></el-input
              ></el-descriptions-item>
              <el-descriptions-item label="产地"
                ><el-input v-model="product.placeOfOrigin"></el-input
              ></el-descriptions-item>
            </el-descriptions> -->
            <!--将原el-descriptions描述标签，改为表单提交，原因为描述标签无法做数据验证-->
            <el-form
              :model="product"
              :rules="rules"
              ref="product"
              label-width="100px"
            >
              <el-form-item label="入库日期" prop="inboundDate">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    v-model="product.inboundDate"
                    style="width: 100%"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="商品编号" prop="productID">
                <el-col :span="15"
                  ><el-input v-model="product.productID"></el-input
                ></el-col>
              </el-form-item>
              <el-form-item label="商品名称" prop="productName">
                <el-col :span="15"
                  ><el-input v-model="product.productName"></el-input
                ></el-col>
              </el-form-item>
              <el-form-item label="产地" prop="placeOfOrigin">
                <el-col :span="15"
                  ><el-input v-model="product.placeOfOrigin"></el-input
                ></el-col>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="handleUpdate()"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            class="el-button"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="query.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      total: this.realTableDate.length,
      query: {
        currentPage: 1,
        pageSize: 10,
      },
      product: {
        inboundDate: null,
        productID: null,
        productName: null,
        placeOfOrigin: null,
      },
      rules: {
        inboundDate: [
          { required: true, message: "请选择日期", trigger: "blur" },
        ],
        productName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        productID: [
          { required: true, message: "请输入商品编号", trigger: "blur" },
        ],
        placeOfOrigin: [
          { required: true, message: "请输入产地", trigger: "blur" },
        ],
      },
    };
  },
  props: [
    "tableData",
    "deleteDate",
    "deleteDateBatch",
    "update",
    "CurrentChange",
    "realTableDate",
  ],
  computed: {
    computedDate() {
      //增添功能时间格式
      //bug 字符串时提交不成功 2022-3-23
      //(this.product.inboundDate).replace(/-/g,'/')
      //截取第5位判断是否为-，如果是则直接提交不执行时间戳转换
      //进来后，this.product.inboundDate没有substring这个方法
      //判断时间戳长度(时间戳没有.length属性)
      if (this.product.inboundDate.length) {
        return this.product.inboundDate;
      } else {
        //bug:月份前的0消失,已修复
        let year = this.product.inboundDate.getFullYear();
        let month = parseInt(this.product.inboundDate.getMonth() + 1);
        if (month < 10) {
          month = "0" + month;
        }
        let day = this.product.inboundDate.getDate();
        if (day < 10) {
          day = "0" + day;
        }
        return year + "-" + month + "-" + day;
      }
    },  
  },
  methods: {
    handleSelectionChange() {},
    handleEdit(index, obj) {
      /*
      inboundDate 入库日期
      productID 商品编号
      productName 商品名称
      placeOfOrigin 产地
       */
      this.dialogVisible = true;
      this.product.inboundDate = obj.date;
      this.product.productID = obj.id;
      this.product.productName = obj.name;
      this.product.placeOfOrigin = obj.address;
    },
    mounted() {
      handleEdit();
    },
    handleDelete(index, obj) {
      if (confirm("确认删除吗")) {
        this.deleteDate(obj);
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handSelectionAll(selections, param) {
      this.deleteDateBatch(selections);
    },
    handSelection(selections) {
      this.deleteDateBatch(selections);
    },
    handleUpdate() {
      if (
        !this.product.inboundDate ||
        !this.product.productID.trim() ||
        !this.product.productName.trim() ||
        !this.product.placeOfOrigin.trim()
      )
        return alert("输入不能为空");
      this.dialogVisible = false;
      const obj = {
        date: this.computedDate,
        id: this.product.productID,
        name: this.product.productName,
        address: this.product.placeOfOrigin,
      };
      this.update(obj);
    },
    handleSizeChange(val) {
      console.log('log');
      // this.query.pageSize = val;
      // this.getCateList();
      // 重新请求数据
    },
    handleCurrentChange(val) {
      //val当前页数
      this.CurrentChange(val, this.query.pageSize);
      // this.query.currentPage = val;
      // this.getCateList();
    },
  },
  created() {
    //挂载阶段，发送一页可以显示多少条数据
  },
  updated(){
    if(this.tableData.length<this.realTableDate.length){
      this.total=this.tableData.length;
    }else{
     this.total=this.realTableDate.length;
     }
     //翻页器理想状态，当只有10条数据时，显示为1页，且上下页不可用
     //疑问：为什么只有十条的时候，翻页器就不见了
  }
};
</script>
<style lang="scss" scoped>
.el-button {
  margin-left: 5px;
}
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
